<template>
  <div>



    <van-row class="backg">
      <van-col span="24">
        <van-nav-bar
            title="我的工作"
            :safe-area-inset-top="true"
        />
      </van-col>
      <van-col span="24" class="backg-c">
        <van-col span="24" class="title-column">
          <van-image class="title-img" width="10" height="12" :src="require('@/assets/img/column-icon.png')"/>
          工作统计
        </van-col>

        <van-col span="8">
          <router-link to="/Remind?title=待处理事件">
            <div class="count">
              <div class="count-iconbg count-bg1">
                <van-image class="" width="20" height="21" :src="require('@/assets/img/icon-01.png')"/>
                <div class="count-column">
                  {{ PendingCount }}
                </div>
              </div>
              <div class="font-14">待处理</div>
              <div class="count-line"></div>
            </div>
          </router-link>
        </van-col>

        <van-col span="8">
          <router-link to="/Remind?title=已逾期事件">
            <div class="count">
              <div class="count-iconbg count-bg2">
                <van-image class="" width="20" height="21" :src="require('@/assets/img/icon-02.png')"/>
                <div class="count-column">
                  {{ OverdueCount }}
                </div>
              </div>
              <div class="font-14">已逾期</div>
              <div class="count-line"></div>
            </div>
          </router-link>
        </van-col>

        <van-col span="8">
          <router-link to="/Remind?title=已完成事件">
            <div class="count">
              <div class="count-iconbg count-bg3">
                <van-image class="" width="20" height="21" :src="require('@/assets/img/icon-03.png')"/>
                <div class="count-column">
                  {{ Completedcount }}
                </div>
              </div>
              <div class="font-14">已完成</div>
              <div class="count-line"></div>
            </div>
          </router-link>
        </van-col>
      </van-col>
    </van-row>

    <van-row class="backg">
      <van-col span="24" class="backg-c">
        <van-col span="18" class="title-column">
          <van-image class="title-img" width="10" height="12" :src="require('@/assets/img/column-icon.png')"/>
          事件类型
        </van-col>

        <van-col span="6" class="workAc-text" @click="shrink">
          <van-image class="title-img" width="10" height="10" :src="require('@/assets/img/icon-04.png')"/>
          <span class="font-12">{{ message }}</span>
        </van-col>

        <van-col span="24" v-show="isShow">

          <van-swipe>
            <van-swipe-item>

              <van-col span="8">
                <router-link to="/Remind?uu=垃圾堆积">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-05.png')"/>
                    <div class="font-14">垃圾堆积</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=出店经营">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-06.png')"/>
                    <div class="font-14">出店经营</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=游商摊贩">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-07.png')"/>
                    <div class="font-14">游商摊贩</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=沿街晾晒">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-08.png')"/>
                    <div class="font-14">沿街晾晒</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=人员聚集">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-09.png')"/>
                    <div class="font-14">人员聚集</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=机动车违停">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-10.png')"/>
                    <div class="font-14">机动车违停</div>
                  </div>
                </router-link>
              </van-col>
            </van-swipe-item>
            <van-swipe-item>
              <van-col span="8">
                <router-link to="/Remind?uu=非机动车违停">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-07.png')"/>
                    <div class="font-14">非机动车违停</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=违规宣传物">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-12.png')"/>
                    <div class="font-14">违规宣传物</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=消控室离岗">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-09.png')"/>
                    <div class="font-14">消控室离岗</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=消防通道违规占用">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-10.png')"/>
                    <div class="font-14">消防通道违规占用</div>
                  </div>
                </router-link>
              </van-col>

              <van-col span="8">
                <router-link to="/Remind?uu=电动车飞线">
                  <div class="count">
                    <van-image class="" width="21" height="21" :src="require('@/assets/img/icon-11.png')"/>
                    <div class="font-14">电动车飞线</div>
                  </div>
                </router-link>
              </van-col>
            </van-swipe-item>
          </van-swipe>

        </van-col>
      </van-col>
    </van-row>

    <van-row class="backg bottom-mt">
      <van-col span="18" class="title-column">
        <van-image class="title-img" width="10" height="12" :src="require('@/assets/img/column-icon.png')"/>
        待处理事件
      </van-col>
      <van-col span="6" class="workAc-text">
        <router-link to="/Remind" class="font-12">更多 ></router-link>
      </van-col>

      <van-col span="24" class="backg-c event">
        <van-col span="24" class="font-14" style="text-align: center;">
          {{ messagess }}
        </van-col>
        <van-col span="24" class="event-line" v-for="(item, index) in list" :key="index">
          <router-link :to="{path:'/RemindDetails?eventId='+item.eventId }">

            <van-col span="8" class="event-img">
              <van-image width="100%" height="100"
                         v-bind:src="item.eventImage"/>
            </van-col>
            <van-col span="16" class="event-padding">
              <van-col span="14" class="font-14">
                {{ item.eventTitle }}
              </van-col>
              <van-col span="10" class="font-12 font-fu">
                <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-20.png')"/>
                剩余<span class="font-color">{{ Number(item.pengTime/60/60).toFixed(0)}}</span>小时
              </van-col>
              <van-col span="24" class="font-12">
                <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-06.png')"/>
                {{ item.placeTypeName }}
              </van-col>
              <van-col span="24" class="font-12">
                <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-18.png')"/>
                {{ item.gridCommunity }}
              </van-col>
              <van-col span="24" class="font-12">
                <van-image class="" width="10" height="10" :src="require('@/assets/img/icon-19.png')"/>
                {{ item.reportTime }}
              </van-col>
            </van-col>
          </router-link>
        </van-col>

      </van-col>

    </van-row>

    <Nav/>
  </div>

</template>

<script>
import Nav from "@/components/Nav.vue";
import {Toast} from "vant";

export default {
  components: {
    Nav
  },

  data() {
    return {
      isShow: true,
      message: '隐藏',
      PendingCount: 0,
      OverdueCount: 0,
      Completedcount: 0,
      messagess: '',
      list: [],
    }
  },
  created() {
    this.pending();
  },
  methods: {
    shrink() {
      this.isShow = !this.isShow;
      if (this.isShow) {
        this.message = '隐藏';
      } else {
        this.message = '展开';
      }
    },
    pending: function () {
      var userId = localStorage.getItem("userId");
      this.$http.post('http://139.224.226.216:8083/appwork/pendingPageFive?userId=' + userId)
          .then(res => {
            console.log(res);
            if (res.data.data.pendCount!=null){
              this.PendingCount = res.data.data.pendCount;
            }
            if (res.data.data.overCount != null) {
              this.OverdueCount = res.data.data.overCount;
            }
            if (res.data.data.completedCount != null) {
              this.Completedcount = res.data.data.completedCount;
            }


            sessionStorage.setItem("PendingCount", this.PendingCount);
            sessionStorage.setItem("OverdueCount", this.OverdueCount);
            sessionStorage.setItem("Completedcount", this.Completedcount);
          })
          .catch(err => {
            console.log(err);
          });
      this.$http
          .post(
              "http://139.224.226.216:8083/appEventInfo/selectOneHkevent?userId=" +
              userId +
              "&eventAlertStatus=3&pageNum=1&pageSize=5"
          )
          .then((res) => {
            console.log(userId);
            console.log(res);
            if (res.data.code == 301 || res.data.data == null) {
              this.messagess = "无数据";
            } else if (res.data.code == 0) {
              console.log(res.data.data.appHkeventList);
              this.list = res.data.data.appHkeventList;
            } else {
              Toast("非法操作！");
            }
          })
          .catch((err) => {
            console.log("输出错误信息");
            console.log(err);
          });
    }
  }
};
</script>

<style scoped>

.count {
  text-align: center;
  margin: 15px 0;
}

.count-iconbg {
  width: 46px;
  height: 46px;
  border-radius: 23px;
  margin: 0 auto;
  position: relative;
}

.count-bg1 {
  background-color: rgba(88, 132, 245, 0.1);
}

.count-bg2 {
  background-color: rgba(243, 41, 41, 0.1);
}

.count-bg3 {
  background-color: rgba(59, 180, 0, 0.1);
}

.count-img {

}

.count-column {
  position: absolute;
  right: -15px;
  top: -10px;
  background-image: url("../assets/img/warn-icon.png");
  background-size: 100% 100%;
  width: 20px;
  height: 21px;
  text-align: center;
  line-height: 20px;
  font-size: 10px;
  color: #fff;
}

.count-line {
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background-color: #e2e2e2;
}

.workAc-text {
  text-align: right;
  font-size: 14px;
  color: #666;
}

.event {
  margin: 15px 0;
}
</style>